<template>
	<view class="tantan-slide" :style="{
		width: winWidth + 'px',
		height: winHeigh + 'px',
	}">


		<!-- 底部图标 -->
		<view class="tantan-slide-footer">
			<!-- 撤回 -->
			<view class="tantan-slide-footer-btnA" @click="withdraw(currentIndex)">
				<view class="tantan-slide-footer-icon">
					<image style="width: 50rpx;height: 50rpx;" src="../../static/dgex-tantan/back.png">
					</image>
				</view>
				<view class="tantan-slide-footer-icon">
					<image style="width: 50rpx;height: 50rpx;" src="../../static/dgex-tantan/back.png"></image>
				</view>
			</view>
			<!-- 关闭 -->
			<view class="tantan-slide-footer-btn" @click="footerBtnClick('dislike')">
				<view class="tantan-slide-footer-icon" :style="{
					backgroundColor: '#f8ba35',
					opacity: dislike,
					zIndex: 1
				}">
					<image style="width: 50rpx;height: 50rpx;" src="../../static/dgex-tantan/close_white.png">
					</image>
				</view>
				<view class="tantan-slide-footer-icon">
					<image style="width: 50rpx;height: 50rpx;" src="../../static/dgex-tantan/close.png"></image>
				</view>
			</view>
			<!-- 关注 -->
			<view class="tantan-slide-footer-btn" @click="footerBtnClick('love')">
				<view class="tantan-slide-footer-icon" :style="{
					backgroundColor: '#fa547c',
					opacity: love,
					zIndex: 1
				}">
					<image style="width: 50rpx;height: 50rpx;" src="../../static/dgex-tantan/like_white.png">
					</image>
				</view>
				<view class="tantan-slide-footer-icon">
					<image style="width: 50rpx;height: 50rpx;" src="../../static/dgex-tantan/like.png"></image>
				</view>

			</view>
			<!-- 私聊 -->
			<view class="tantan-slide-footer-btnA" @click="handleSwitchConversation">
				<view class="tantan-slide-footer-icon">
					<image style="width: 50rpx;height: 50rpx;" src="../../static/dgex-tantan/info.png">
					</image>
				</view>
				<view class="tantan-slide-footer-icon">
					<image style="width: 50rpx;height: 50rpx;" src="../../static/dgex-tantan/info.png"></image>
				</view>

			</view>
		</view>


		<view @touchstart.capture="touchStart($event,currentIndex)"
			@touchmove.stop.capture="touchMove($event,currentIndex)" @touchend.capture="touchEnd(currentIndex)"
			class="tantan-slide-box">
			<template v-for="(item, index) in list">
				<view class="tantan-slide-box-item" :key="index" v-if="currentIndex + visible >= index"
					@click.stop="clickImage" :style="[cardTransform(item, index)]">

					<view class="tantanPosition flex">
						<view class="vipIconA flex_center m-r-20" v-if="item.is_auth==1">
							<image src="/static/dgex-tantan/zr.png" mode=""></image>
							<view class="white">真人</view>
						</view>
						<view class="iconABox flex_center" v-if="item.is_line==1">
							<view class="iconABoxA m-r-10"></view>
							<view class="iconABoxB">在线</view>
						</view>
					</view>
					<!-- 加载图片会闪屏 双if避免 -->
					<template v-if="currentIndex + visible >= index && currentIndex <= index">
						<view class="tantan-slide-direction" :animation="currentIndex === index ? animationData : ''">
							<image class="tantan-slide-img" style="background-color: #fff;" mode="aspectFill"
								:src="item.cover_image"></image>
							<view class="tantan-slide-box-item-bg">
								<view class="tantan-slide-box-info">
									<view class="flex">
										<view class="title m-r-20" v-if="item.nickname" v-text="item.nickname"></view>
										<view class="vipIcon flex_center" v-if="item.level>1">
											<image src="../../static/icon/hg.png" mode=""></image>
											<view class="white">{{item.level_name}}</view>
										</view>
									</view>
									<view class="desc">
										{{item.gender==1?'男':item.gender=='0'?'女':''}} | {{item.age}}岁 |
										{{item.height}} | {{item.constellation||'未设星座'}}
									</view>
									<view class="tags flex">
										<view class="tag white m-r-20" v-if="item.city">
											<text class="iconfont icon-shouhuodizhi m-r-10"
												style="font-size: 24rpx;"></text>
											{{item.city}}
										</view>
										<view class="tag white" v-if="item.career_name">
											<text class="iconfont icon-gongwenbao m-r-10"
												style="font-size: 24rpx;"></text>
											{{item.career_name}}
										</view>
									</view>
								</view>
							</view>
						</view>
						<view v-if="index === currentIndex">
							<view class="tantan-slide-box-icon tantan-slide-box-dislike" :style="{
									opacity: dislike * 1.5,
									transform: 'scale('+ (dislike + 1 > 2 ? 2 : dislike + 1 )  +')',
								}">
								<image style="width: 30rpx;height: 30rpx;" src="../../static/dgex-tantan/close.png">
								</image>
							</view>
							<view class="tantan-slide-box-icon tantan-slide-box-love zINdex" :style="{
									opacity: love * 1.5,
									transform: 'scale('+ (love + 1 > 2 ? 2 : love + 1 )  +')',
								}">
								<image style="width: 30rpx;height: 30rpx;" src="../../static/dgex-tantan/like.png">
								</image>
							</view>

						</view>
					</template>
				</view>
			</template>
		</view>

		<!-- 是否开通会员 -->
		<noneVip ref="popup" id="myChild"></noneVip>


		<uv-toast ref="uToast"></uv-toast>
	</view>
</template>

<script>
	import TencentCloudChat from '@tencentcloud/chat';
	// #ifdef MP-WEIXIN
	import "@/TUIKit/components/TUIConversation/subPackage-init.ts";
	// #endif
	import TUIChatEngine, {
		TUIConversationService,
		TUIStore,
		StoreName,
	} from "@tencentcloud/chat-uikit-engine";
	export default {
		name: "slide",
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				winWidth: 0,
				winHeigh: 0,
				/*记录x y轴*/
				x: {
					start: 0,
					move: 0,
					end: 0
				},
				y: {
					start: 0,
					move: 0,
					end: 0
				},
				visible: 3,
				/*下标*/
				currentIndex: 0,
				/*滑动*/
				swipering: false,
				/*滑动中*/
				slideing: false,
				love: 0,
				dislike: 0,
				direction: '',
				animationData: {},
				userInfo: {}
			}
		},
		mounted() {
			const res = uni.getSystemInfoSync()
			this.winWidth = res.windowWidth
			this.winHeigh = res.windowHeight
		},
		created() {
			this.getUserInfo()
		},
		methods: {
			handleSwitchConversation() {
				console.log(this.list[this.currentIndex]);
				if (this.userInfo.level > 1) {
					let id = 'C2C' + this.list[this.currentIndex].mobile
					uni.$emit("handleSwitchConversation", id);
					TUIConversationService.switchConversation(id);
					this.$util.redirectTo('/TUIKit/components/TUIChat/index', {
						handleSwitchConversation: id
					})
				} else {
					const childComponent = this.selectComponent('#myChild');
					childComponent.$vm.openFn();
				}
			},
			// 撤回
			withdraw(index) {
				console.log(index, '----====----');
				if(index==0) {
					uni.showToast({
						title:'第一页不可撤回',
						icon:'none'
					})
					return
				}
				if (this.userInfo.level > 1) {
					this.currentIndex--
					this.slideing = true;
					this.list[index - 1].x = 0
					this.list[index - 1].y = 0
					this.slideing = false;
					this.$forceUpdate()
				} else {
					const childComponent = this.selectComponent('#myChild');
					childComponent.$vm.openFn();
				}
			},
			// 获取用户信息
			getUserInfo() {
				this.$api.sendRequest({
					url: '/api/user/userInfo',
					success: res => {
						this.userInfo = res.data
					}
				})
			},
			cardTransform(item, index) {
				let css = {
					'zIndex': this.list.length - index,
					'opacity': this.currentIndex + this.visible - 1 >= index && this.currentIndex <= index ? 1 : 0,
					'transform': 'rotate(' + ((item.x || 0) / 30) + 'deg) translate3d(' + (item.x || 0) + 'px,' + (item
						.y || 0) + 'px, ' + (this.currentIndex - index) * 50 + 'px)'
				};
				// css.transform += this.currentIndex && this.currentIndex === index ? `rotate(0,${this.direction === 'left' ? '-10':'10'}deg)` : ''
				if (index === this.currentIndex) {
					if (this.slideing) {
						css["transitionDuration"] = `${!this.swipering ? 1000 : 0}ms`;
					} else {
						css["transitionDuration"] = `${!this.swipering ? 300 : 0}ms`;
					}
				}
				return css
			},
			touchStart(e, index) {
				console.log('关注');
				if (this.slideing) return;
				if (typeof this.list[index].x === 'undefined' && typeof this.list[index].y === 'undefined') {
					this.$set(this.list[index], 'y', 0)
					this.$set(this.list[index], 'x', 0)
				}
				this.swipering = true;
				this.x.start = e.touches[0].pageX;
				this.y.start = e.touches[0].pageY;
			},
			touchMove(e, index) {
				if (this.slideing) return
				// 滑动状态/最后一个就不滑动
				if (this.list.length == index + 1) {
					return;
				}
				this.x.move = e.touches[0].pageX;
				this.y.move = e.touches[0].pageY;

				this.list[index].x = this.x.move - this.x.start
				this.list[index].y = this.y.move - this.y.start
				if (Number.parseInt(this.list[index].x) > 0) {
					this.love = Number.parseInt(this.list[index].x) / (100 * 2)
				} else {
					this.dislike = Math.abs(Number.parseInt(this.list[index].x) / (100 * 2))
				}
			},
			pairInfo(id) {
				this.$api.sendRequest({
					url: '/api/Friends/pairInfo',
					data: {
						user_id: id
					},
					success: res => {
						if (res.code == 1) {
							this.loveFnA()
						} else {
							// this.$refs.uToast.show({
							// 	type: 'default',
							// 	message: res.msg,
							// 	duration: 1500
							// })
						}

					}
				})
			},
			likeFn(type, id) {
				this.$api.sendRequest({
					url: '/api/Friends/love',
					data: {
						type: type,
						user_id: id
					},
					success: res => {
						if (res.code == 1 && type == '添加') {
							this.pairInfo(id)
						} else if(res.code == 1 && type == '删除') {
							
						}else {
							this.$refs.uToast.show({
								type: 'default',
								message: res.msg,
								duration: 1500
							})
						}
					}
				})
			},
			loveFnA() {
				// 添加好友
				uni.request({
					url: `https://console.tim.qq.com/v4/sns/friend_add?sdkappid=${this.$config.sdkappid}&identifier=${this.$config.identifier}&usersig=${this.UserSig}&random=${this.list[this.currentIndex].mobile}&contenttype=json`,
					header: {
						'content-type': 'application/json',
					},
					method: 'POST',
					data: {
						"From_Account": this.userInfo.mobile,
						"AddFriendItem": [{
							"To_Account": this.list[this.currentIndex].mobile,
							"AddSource": "AddSource_Type_admin"
						}]
					},
					success: res => {
						console.log(res, 'res');
						let code = res.data.ResultItem[0].ResultCode
						if (res.data.ErrorCode == 0 && code == 0) {
							// 成功
							this.$util.redirectTo('/otherpages/matchSuccess/matchSuccess', {
								id: this.list[this.currentIndex].id
							})
						} else if (res.data.ErrorCode == 30014 || code == 30014) {
							this.$refs.uToast.show({
								type: 'default',
								message: '对方好友列表已满',
								duration: 1000
							})
						} else if (res.data.ErrorCode == 30015 || code == 30015) {
							this.$refs.uToast.show({
								type: 'default',
								message: '对方已经是您的好友了',
								duration: 1000
							})
						} else if (res.data.ErrorCode == 30515 || code == 30515) {
							this.$refs.uToast.show({
								type: 'default',
								message: '您已将对方拉黑',
								duration: 1000
							})
						} else if (res.data.ErrorCode == 30525 || code == 30525) {
							this.$refs.uToast.show({
								type: 'default',
								message: '对方已将您拉黑',
								duration: 1000
							})
						} else if (res.data.ErrorCode == 30540 || code == 30540) {
							this.$refs.uToast.show({
								type: 'default',
								message: '请勿频繁加好友',
								duration: 1000
							})
						}
					},
					fail: err => {
						console.log(err, 'err');
					}
				})
			},
			touchEnd(index) {
				if (this.slideing) return
				this.swipering = false;
				if (this.list.length == index + 1) {
					return;
				}
				if (
					this.list[index].x > 0 &&
					this.list[index].x > this.winWidth / 2 - this.winWidth / 5
				) {
					this.likeFn('添加', this.list[index].id)
					// 滑右侧
					this.touchEndNext(index);

				} else if (
					this.list[index].x < 0 &&
					this.list[index].x < -this.winWidth / 2 + this.winWidth / 5
				) {
					this.likeFn('删除', this.list[index].id)
					// 滑左侧
					this.touchEndNext(index);
				} else {
					// 没划出去收回了
					this.list[index].x = 0;
					this.list[index].y = 0;
					this.slideing = false;
					this.love = 0;
					this.dislike = 0;
				}
			},
			touchEndNext(index) {
				this.slideing = true;
				console.log(this.list, 'end');
				this.list[index].x = this.list[index].x * 5;
				this.list[index].y = this.list[index].y * 5;
				console.log(this.list, 'end2');
				this.touchEndDone()
			},
			touchEndDone() {
				return new Promise((resolve) => {
					setTimeout(() => {
						this.slideing = false
						this.$emit('onChange', {
							currentIndex: this.currentIndex,
							currentItem: this.list[this.currentIndex],
							type: this.love !== 0 ? 'love' : 'dislike'
						})
						this.currentIndex++
						this.x.move = 0
						this.y.move = 0
						this.slideing = false
						this.btnClickType = false
						this.love = 0
						this.dislike = 0
						resolve()
					}, 300);
				})
			},
			footerBtnClick(type) {
				if (this.list.length == this.currentIndex + 1) {
					return;
				}
				console.log('++++');
				if (this.btnClickType) {
					return
				}
				this.btnClickType = true
				let w = 0
				if (type === 'love') {
					w = this.winWidth * 1.5
					this.love = 1
				} else if (type === 'dislike') {
					w = -this.winWidth * 1.5
					this.dislike = 1
				}
				this.$set(this.list[this.currentIndex], 'x', w)
				this.touchEndDone()
			},
			clickImage(e) {
				console.log(e);
				this.$util.redirectTo('/otherpages/userDetali/userDetali', {
					id: this.list[this.currentIndex].id
				})
				this.direction = this.winWidth / 2 > e.detail.x ? 'left' : 'right';
				/*#ifdef APP-PLUS || H5*/

				let animation = uni.createAnimation({
					duration: 200,
					timingFunction: 'ease',
				})

				this.animation = animation

				this.animation.rotateY(this.direction === 'left' ? -10 : 10).step().rotateY(this.direction === 'left' ? 5 :
					-5).step()
				this.animationData = animation.export()

				setTimeout(function() {
					this.animation.rotateY(0).step()
					this.animationData = animation.export()
				}.bind(this), 300)
				/*#endif*/
				this.$emit('onClickImage', {
					type: 'click',
					currentIndex: this.currentIndex,
					currentItem: this.list[this.currentIndex],
				})
			}
		}
	};
</script>
<style>
	.popupContact {
		width: 654rpx;
		height: 712rpx;
		position: relative;
	}

	.popupContactBoxBottom {
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-left: -302rpx;
		width: 604rpx;
		height: 142rpx;
		line-height: 142rpx;
		border-top: 4rpx dashed #d1d1d1;


	}

	.copy {
		width: 56rpx;
		height: 36rpx;
		background: #f2f2f2;
		opacity: 1;
		border-radius: 6rpx;
		text-align: center;
		font-size: 20rpx;
		font-family: PingFangSC-Regular;
		line-height: 36rpx;
		color: #9A9A9A;
	}

	.popupContactImg {
		position: absolute;
		width: 654rpx;
		height: 712rpx;
	}

	.popupContactBox {
		position: absolute;
		width: 654rpx;
		height: 712rpx;
		text-align: center;




	}

	.popupContactBtn {
		margin: 0 auto;
		margin-top: 64rpx;
		width: 390rpx;
		height: 72rpx;
		background: #fef4ef;
		opacity: 1;
		border-radius: 8rpx;


	}

	.popupContactBox text {
		font-size: 32rpx;
		font-family: PingFangSC-Regular;
		line-height: 28rpx;
		color: #EC6930;
	}

	.popupContactBox image {
		margin-top: 88rpx;
		width: 312rpx;
		height: 312rpx;
	}

	.zINdex {
		z-index: 9999999 !important;
	}

	.iconABox {
		height: 38rpx;
		width: 95rpx;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 8rpx;
		line-height: 38rpx;
		align-items: center;
	}

	.iconABoxA {
		width: 8rpx;
		height: 8rpx;
		background: #44fe17;
	}

	.iconABoxB {
		font-size: 20rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 28rpx;
	}

	.vipIcon {
		height: 38rpx;
		/* width: 84rpx; */
		background-color: #ffbd00;
		border-radius: 8rpx;
		line-height: 38rpx;
		align-items: center;
		padding: 0 10rpx;
	}

	.vipIconA {
		height: 38rpx;
		width: 95rpx;
		background-color: #5ccafd;
		border-radius: 8rpx;
		line-height: 38rpx;
		align-items: center;
	}

	.vipIconA image {
		width: 24rpx;
		height: 24rpx;
		margin-right: 5rpx;
	}

	.vipIcon image {
		width: 24rpx;
		height: 24rpx;
		margin-right: 5rpx;
	}

	.tantan-slide {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		/* padding-top: -30rpx; */
		margin-top: -30rpx;
	}

	.tantan-slide-box {
		position: relative;
		width: 95%;
		height: 90%;
		perspective: 2100rpx;
		perspective-origin: 50% -30%;
		transform-style: preserve-3d;
		margin: auto;
	}

	.tantan-slide-box-item {
		transform-style: preserve-3d;
		display: flex;
		width: 100%;
		height: 100%;
		border-radius: 24rpx;
		position: absolute;
		opacity: 0;
		transform: translate3d(0px, 0px, 0px) rotate(0deg);
		transition: 300ms;
		color: #fff;
	}

	.tantan-slide-box-item.on {
		display: block;
	}

	.tantan-slide-box-item-bg {
		height: 380rpx;
		background-image: linear-gradient(to bottom, transparent, #000000 70%);
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		z-index: 1;
		border-bottom-right-radius: 40rpx;
		border-bottom-left-radius: 40rpx;
	}

	.tantan-slide-box-icon {
		position: absolute;
		width: 70rpx;
		height: 70rpx;
		top: 45rpx;
		border-radius: 100%;
		background-color: #fff;
		z-index: 1;
		opacity: 0;
		transition: 100ms;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tantan-slide-box-love {
		left: 50rpx;
	}

	.tantan-slide-box-dislike {
		right: 50rpx;
	}

	.tantanPosition {
		position: absolute;
		top: 50rpx;
		left: 50rpx;
		z-index: 99;
	}

	.tantan-slide-footer {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0%;
		margin: auto;
		z-index: 9999;
		padding: 30rpx 0;
		display: flex;
		justify-content: center;
	}

	.tantan-slide-footer-btn {
		height: 96rpx;
		width: 180rpx;
		margin: 0 16rpx;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-content: center;
		position: relative;
		transition: 100ms;
	}

	.tantan-slide-footer-btnA {
		height: 96rpx;
		width: 96rpx;
		margin: 0 16rpx;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-content: center;
		position: relative;
		transition: 100ms;
	}

	.tantan-slide-footer-btn:active {
		transform: scale(0.9);
	}

	.tantan-slide-footer-icon {
		width: 100%;
		height: 100%;
		border-radius: 50rpx;
		transition: 200ms;
		background-color: rgba(158, 158, 158, 0.3);
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 0;
		left: 0;
	}

	.tantan-slide-img {
		position: relative;
		will-change: transform;
		width: 100%;
		height: 100%;
		border-radius: 40rpx;
	}

	.tantan-slide-img.on {
		transform: scale(1);
		width: 50rpx;
		height: 50rpx;
	}

	.tantan-slide-box-info {
		padding: 0 32rpx;
		color: #ffffff;
	}

	.tantan-slide-box-info .title {
		font-size: 46rpx;
		line-height: 1;
		text-shadow: 0 0 10rpx rgb(0, 0, 0, 0.5);
		color: #ffffff;
	}

	.tantan-slide-box-info .desc {
		font-size: 26rpx;
		line-height: 1;
		margin-top: 30rpx;
		text-shadow: 0 0 10rpx rgb(0, 0, 0, 0.5);
		color: #ffffff;
	}

	.tantan-slide-box-info .tags {
		margin-top: 24rpx;
	}

	.tantan-slide-box-info .tag {
		height: 48rpx;
		font-size: 24rpx;
		padding: 0 16rpx;
		line-height: 48rpx;
		background-color: rgba(255, 255, 255, 0.3);
		border-radius: 10rpx;
	}

	.tantan-slide-direction {
		width: 100%;
		height: 100%;
	}
</style>
<style lang="scss">

</style>
